<script setup>
import { ref, onMounted } from 'vue';
import mori from '@/assets/mori.png';
import { useRouter } from 'vue-router';
const showCenter = ref(false);
const router = useRouter();
const agreementsrr = localStorage.getItem('agreementsrr');

onMounted(() => {
    if (agreementsrr == 'true') {
        showClick()
    } else {
        showCenter.value = true;
    }
})

function showClick() {
    showCenter.value = false;
    localStorage.setItem('agreementsrr', 'true');
    setTimeout(() => {
        router.push('/home')
    }, 2000)
}
</script>

<template>
    <div>
        <header>
            <span style="margin: 10px;">掌握一手新闻</span>
            <span>发现更精彩的世界</span>
        </header>
    
        <footer>
            <img style="height: 0.24rem;" src="@/assets/mori.png" alt="" />
            <span>小然资讯</span>
        </footer>
        <van-popup style="width: 72vw;" :close-on-click-overlay="false" v-model:show="showCenter" round
            :style="{ padding: '0.1rem' }">
            <template #default>
                <div class="content-div">
                    <h4 style="font-size: 0.16rem; text-align: center;">个人信息保护指引</h4>
                    <p style="font-size: 0.14rem; margin: 0.05rem;">

                        欢迎使用小默资讯APP！我们将通过
                        <span style="color: #f66;">《用户协议》</span>和
                        <span style="color: #f66;">《隐私政策》</span>
                        将帮助你了解我们提供的服务，及收集、处理个人信息的方式。
                    </p>
                    <span style="display: flex;width: 100%;justify-content: space-between;">
                        <van-button>不同意</van-button>
                        <van-button type="success" @click="showClick">同意</van-button>
                    </span>
                </div>
            </template>
        </van-popup>
    </div>
</template>

<style lang="scss" scoped>
.content-div {

    display: flex;
    flex-direction: column;
    align-items: center;

    .van-button {
        width: 1.2rem;
        height: 0.4rem;
        border-radius: 0.05rem;
    }
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 0.6rem;
    justify-content: center;
    color: rgb(236, 82, 62);
    position: fixed;
    top: calc(40vh - 0.3rem);
    font-size: 0.2rem;
}

footer {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 100px;
    width: 100%;
    font-size: 0.16rem;

    img {
        margin-right: 0.05rem;
    }
}
</style>